<template>
  <div id="map">
    <div @click="swithClick" style="position: absolute;top: 15px;right: 60px;z-index: 1;background-color: #fff; padding: 5px 10px; border-radius: 5px;"><el-switch
      v-model="isSetPosition">
    </el-switch>{{ isSetPosition?'退出标点模式':'进入标点模式' }}</div>
    <el-dialog title="标点" :visible.sync="setPositionVis" :show-close="false">
      <el-form ref="form"  label-width="140px">
        <el-form-item label="经纬度">
          <template slot>
            经度为{{selectlat.toFixed(5)}}，纬度为{{ selectlng.toFixed(5) }}
          </template>
        </el-form-item>
        <el-form-item label="农户姓名">
          <el-select style="width: 300px" v-model="selectName" filterable remote reserve-keyword placeholder="请输入关键词"
            :remote-method="doGetSurveyNames" :loading="loading">
            <el-option v-for="item in surveyNames" :key="item.DSSV_ID" :label="item.DSSV_Name"
              :value="item.DSSV_ID">
              {{ item.DSSV_Name }}
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click.stop="setPositionVis = false">取 消</el-button>
        <el-button type="primary" @click.stop="doSetPosition">确定</el-button>
      </div>
    </el-dialog>
  </div>
  
</template>
<script>
import { GetSurveyMap,GetSurveyNames,SetSurveyPosition } from '@/api/project/survey.js'
import { update } from 'lodash';
export default {
  computed: {},
  data: function () {
    return {
      name: null,
      prjId: 0,
      map: null,
      markers: [],
      surveyNames:[],
      selectName:null,
      selectlat:0,
      selectlng:0,
      loading:false,
      setPositionVis:false,
      isSetPosition:false
    }
  },
  methods: {
    swithClick(e){
      e.stopPropagation();
    },
    setLocation(name) {
      this.map.setView(
        [
          parseFloat(this.markers[name]._latlng.lat),
          parseFloat(this.markers[name]._latlng.lng),
        ],
        12
      )
      this.markers[name].toggleTooltip()
    },
    doGetSurveyNames(val) {
      GetSurveyNames(this.prjId,val).then(({ data }) => {
        this.surveyNames = data
        this.loading = false
      })
    },
    updatePosition(){
      var that = this
      GetSurveyMap(that.prjId).then((r) => {
        console.log(that.markers)
      
          for (let key in that.markers) {
            if (that.markers.hasOwnProperty(key)) {
              that.markers[key].remove();
            }
          }
          that.markers=[]
          r.data.PositionInfos.forEach((position) => {
            var pt = { lat: position.Lat, lng: position.Lng }
            var marker = BM.marker(pt).addTo(that.map)
            marker.on('click', function (e) {
              that.$alert(
                '经度：' + e.latlng.lat + '\n 纬度：' + e.latlng.lng,
                '经纬度',
                {
                  confirmButtonText: '确定',
                  callback: (action) => {},
                }
              )
            })
            marker.on("contextmenu", function (e) {
              that.$confirm('是否清除该农户定位?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {              
                SetSurveyPosition(e.target.surveyId,0,0).then(({  }) => {
                  e.target.remove()
                })
              }).catch(() => {
                        
              });
            });
            marker.bindTooltip(position.Name)
            marker.addTo(that.map)
            marker['surveyId']=position.Id
            that.markers[position.Name] = marker
          })
          that.setPositionVis=false
      })
    },
    doSetPosition(){
      var that = this
      SetSurveyPosition(this.selectName,this.selectlat,this.selectlng).then(({ data }) => {
        that.updatePosition()
      })
    },
    doGetSurveyMap() {
      var that = this
      GetSurveyMap(this.prjId).then((r) => {
        const script = document.createElement('script')
        script.src = 'https://map.rdunion.cn:9001/bigemap.js/v2.1.0/bigemap.js'
        script.onload = () => {
          this.prjId = this.$route.query.id
          BM.Config.HTTPS_URL = 'https://map.rdunion.cn:9001'
          BM.Config.HTTP_URL = 'https://map.rdunion.cn:9001'
          var crs = null
          if (r.data.MapCRS == 'BM.CRS.EPSG4326') {
            crs = BM.CRS.EPSG4326
          }
          if (r.data.MapCRS == 'BM.CRS.EPSG3857') {
            crs = BM.CRS.EPSG3857
          }
          that.map = BM.map('map', r.data.MapID, {
            crs: crs,
            center: [r.data.MapLat, r.data.MapLng],
            zoom: 12,
            zoomControl: true,
          })
          that.map.on('click',function(e){
            if(that.isSetPosition){
              that.selectlat = e.latlng.lat;
              that.selectlng = e.latlng.lng;
              that.setPositionVis=true
            }
            
            
          });
          r.data.PositionInfos.forEach((position) => {
            var pt = { lat: position.Lat, lng: position.Lng }
            var marker = BM.marker(pt).addTo(that.map)
            marker.on('click', function (e) {
              that.$alert(
                '经度：' + e.latlng.lat + '\n 纬度：' + e.latlng.lng,
                '经纬度',
                {
                  confirmButtonText: '确定',
                  callback: (action) => {},
                }
              )
            })
            marker.on("contextmenu", function (e) {

              that.$confirm('是否清除该农户定位?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {              
                SetSurveyPosition(e.target.surveyId,0,0).then(({  }) => {
                  e.target.remove()
                })
              }).catch(() => {
                         
              });
            });
            marker.bindTooltip(position.Name)
            marker.addTo(that.map)
            marker['surveyId']=position.Id
            that.markers[position.Name] = marker
          })
          if (that.name) {
            that.setLocation(that.name)
          }
        }
        document.head.appendChild(script)
      })
    },
  },
  mounted: function () {
    this.prjId = this.$route.query.id
    if (this.$route.query.name) {
      this.name = this.$route.query.name
    }
    this.doGetSurveyMap()
  },
}
</script>
  
<style scoped>
@import 'https://map.rdunion.cn:9001/bigemap.js/v2.1.0/bigemap.css';
</style>
  